<script>
import { mapGetters } from "vuex";
import { statcUrl } from "../../api/api";
// export { mapGetters } from "vuex";
export default {
  data() {
    return {
      active: "",
      selectId: "",
      statcUrl,
    };
  },
  computed: {
    //从全局数据获取typeData数据
    ...mapGetters("global", ["getTypeData", "recommedType", "getTitle"]),
    gettypeDataimg() {
      let data = this.getTypeData.filter(
        (item) => item.fatherid.includes(this.selectId) && item.typelevel === 1
      );
      return data;
    },
  },
  methods: {
    changeId(selectId) {
      this.selectId = selectId;
    },
  },
};
</script>
<template>
  <van-nav-bar title="商品分类" />
  <van-search shape="round" placeholder="请输入搜索关键词" />
  <dl class="sub-product">
    <dt>
      <van-sidebar v-model="active">
        <van-sidebar-item
          :title="item.title"
          v-for="item in getTitle"
          :key="item.id"
          @click="changeId(item.id)"
        />
      </van-sidebar>
    </dt>
    <dd class="content">
      <router-link
        :to="'/list/' + items.id"
        v-for="items in gettypeDataimg"
        :key="items.id"
      >
        <img :src="statcUrl + '/' + items.img" />
        <p>{{ items.title }}</p>
      </router-link>
    </dd>
  </dl>
</template>
<style src="./index.scss"></style>
